<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>XMLHttpRequest</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; }
            .wrapper>* { margin: 10px ; border: 1px solid green; padding: 10px; }
            .wrapper>p { border: none ; color: blue ; }
        </style>
    </head>
    <body>

        <p>XMLHttpRequest</p>

        <div class="wrapper static">
            <p>XMLHttpRequest 静态属性:</p>
        </div>

        <div class="wrapper proto">
            <p>XMLHttpRequest 原型属性:</p>
        </div>

        <script type="text/javascript">
            const s = document.querySelector( '.static' );

            let names = Object.getOwnPropertyNames( XMLHttpRequest );

            names.forEach( name=>{
                let node = document.createElement( 'div' );
                node.innerHTML = name ;
                // s.appendChild( node ); // Node.prototype.appendChild( node )
                s.append( node );  // Element.prototype.append( node )
            });

            const p = document.querySelector( '.proto' );

            names = Object.getOwnPropertyNames( XMLHttpRequest.prototype );

            names.forEach( name=>{
                let node = document.createElement( 'div' );
                node.innerHTML = name ;
                // p.appendChild( node ); // Node.prototype.appendChild( node )
                p.append( node );  // Element.prototype.append( node )
            });
        </script>

        <p>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event">
                Event
            </a>
        </p>
    </body>
</html>